<template>
	<view class="private">
		<view class="idle" @click="handlepopu">
			<image class="idle-top" src="../../../static/img/video.png" mode=""></image>
			<view class="idle-center">
				<text class="tit">盆栽转让，30大洋买的带不走阿斯顿发生</text>
				<p>
					<span class="p-one">￥15.0</span>
					<span class="p-two">
						<image class="p-img" src="../../../static/item/眼睛.png"></image>130
					</span>
					<span class="p-three">
						<image class="p-imgone" src="../../../static/tyh/消息.png"></image>13
					</span>
				</p>
			</view>
			<image class="idle-but" src="../../../static/tyh/more.png" mode=""></image>
		</view>
		<view class="but-popup">
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="privatemain">
					<view class="primain-top">
						<text class="top-one">私聊 · 23</text>
						<text class="top-two">x</text>
					</view>
					<view class="privatecenter">
						<text class="center-time">7月30日 11:35</text>
					</view>
					<view class="primain-context">
						<view class="context-main">
							<view>
								<image class="main-img" src="../../../static/item/狗狗.jpg" ></image>
							</view>
							<view class="main-wind">
								<text class="main-text">
									阿斯顿发射点发射点发射点发射点发士大夫阿斯顿发射点发射点发大水
								</text>
							</view>
						</view>
						<view class="useryh">
							<view class="yh-one">
								<text class="yh-mes">价格可以少一点么老板</text>
							</view>
							<view class="yh-two">
								<image class="yh-img" src="../../../static/item/狗狗.jpg"></image>
							</view>
						</view>
						<view class="context-main">
							<view>
								<image class="main-img" src="../../../static/item/狗狗.jpg" ></image>
							</view>
							<view class="main-wind">
								<text class="main-text">
									哈哈哈，少10块，140块，这个风扇我用得很少，跟新的一样。
								</text>
							</view>
						</view>
					</view>

				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		ref,
	} from "vue";
	export default {
		setup() {
			let popup = ref()

			function handlepopu() {
				popup.value.open()
			}
			return {
				handlepopu,
				popup
			}
		}
	}
</script>

<style lang="less">
	.private {
		width: 100%;
		height: 100vh;
		background-color: #dedede;
		
		.privatemain{
			width: 100%;
			height: 80vh;
			.primain-top{
				display: flex;
				width: 100%;
				height: 6vh;
				line-height: 6vh;
				.top-one{
					flex: 1;
					text-align: center;
					margin-left: 40rpx;
					font-weight: 600;
				}
				.top-two{
					margin-right: 30rpx;
				}
			}
			.privatecenter{
				height: 3vh;
				text-align: center;
				font-size: 14px;
				line-height: 3vh;
				.center-time{
					margin-left: 50rpx;
				}
			}
			.primain-context{
				width: 100%;
				height: 100%;
				background: #fff;
				.context-main{
					display: flex;
					width: 100%;
					height: 150rpx;
					.main-img{
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-left: 20rpx;
						margin-top: 40rpx;
					}
					.main-wind{
						width: 60%;
						border: 1px solid #8d8a8d;
						margin-left: 30rpx;
						margin-top: 15rpx;
						border-radius: 10rpx;
						.main-text{
							display: block;
							margin: 15rpx 15rpx;
							font-weight: 550;
						}
					}
				}
				.useryh{
					width: 100%;
					height: 150rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 50rpx;
					margin-bottom: 40rpx;
					.yh-one{
						width: 50%;
						height: 108rpx;
						line-height: 108rpx;
						text-align: center;
						border: 1px solid #8d8a8d;
						margin-right: 20rpx;
						background: #ebecff;
						border-radius: 10rpx;
						.yh-mes{
							font-weight: 550;
						}
					}
					.yh-two{
						.yh-img{
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							margin-right: 30rpx;
						}
					}
				}
			}
		}
		
		.idle {
			display: flex;
			height: 150rpx;
			margin-top: 20px;
			background-color: #fff;

			.idle-top {
				width: 100rpx;
				height: 100rpx;
				margin-top: 25rpx;
				margin-left: 20rpx;
			}

			.idle-center {
				margin-top: 35rpx;
				margin-left: 30rpx;

				// width: 90%;
				.tit {
					display: inline-block;
					width: 75%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.p-one {
					margin-right: 45rpx;
					margin-bottom: -5rpx;
				}

				.p-two {
					margin-right: 45rpx;
				}

				.p-img {
					width: 40rpx;
					height: 40rpx;
					margin-top: 5rpx;
					margin-bottom: -10rpx;
					margin-right: 15rpx;
				}

				.p-imgone {
					width: 40rpx;
					height: 40rpx;
					margin-top: 10rpx;
					margin-bottom: -10rpx;
					margin-right: 15rpx;
				}
			}

			.idle-but {
				width: 60rpx;
				height: 60rpx;
				margin-top: 45rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>